import { getCurrentInstance, onMounted, ref } from "vue";
import { tnNavPage } from "@tuniao/tnui-vue3-uniapp/utils";
import { useSubPageProvide } from "../../../composables";
import type { NavbarRectInfo } from "@tuniao/tnui-vue3-uniapp/components/navbar";
import type { IndexPageOnLoadFunc, IndexPageOnScrollFunc } from "../../../types";
import type { Category } from "@/types/api/category";
import type { Banner } from "@/types/api/banner";
import type { Product } from "@/types/api/product";
import { useScrollTransparentNavbar } from "@/hooks";
import { ColorType } from "@/types/color";
import { generateRandomFloat, generateRandomNumber } from "@/utils/local-mock";

export const useSubPage = () => {
  const instance = getCurrentInstance();
  // 顶部轮播图
  const swiperData = ref<string[]>([
    "https://resource.tuniaokj.com/images/swiper/ad2.jpg",
    "https://resource.tuniaokj.com/images/swiper/ad3.jpg",
    "https://resource.tuniaokj.com/images/swiper/ad4.jpg",
    "https://resource.tuniaokj.com/images/swiper/ad5.jpg",
  ]);

  // 热门分类
  const hotCategoryData = ref<Category[]>([
    {
      id: "1",
      name: "品牌介绍",
      icon: "cute",
      backgroundColor: {
        type: ColorType.select,
        value: "#3c7efe",
      },
      url: "/home-page/brand-introduction/index",
    },
    {
      id: "2",
      name: "合作共赢",
      icon: "cute",
      backgroundColor: {
        type: ColorType.select,
        value: "#2be9bb",
      },
      url: "/home-page/win-win/index",
    },
    {
      id: "3",
      name: "社区话题",
      icon: "cute",
      backgroundColor: {
        type: ColorType.select,
        value: "#e93c32",
      },
      url: "/home-page/topic-community/index",
    },
    {
      id: "4",
      name: "开源生态",
      icon: "cute",
      backgroundColor: {
        type: ColorType.select,
        value: "#ffa929",
      },
      url: "/home-page/tuniao-ecology/index",
    },
  ]);

  // 通知数据
  const noticeData = ref<string[]>(["图鸟官网全新上线，欢迎大家前来访问", "图鸟官网全新上线，欢迎大家前来访问", "图鸟官网全新上线，欢迎大家前来访问"]);

  // 广告胶囊
  const adCapsuleData = ref<string>("https://resource.tuniaokj.com/images/swiper/capsule1.png");

  // 热门案例
  const hotCaseData = ref<string[]>([
    "https://resource.tuniaokj.com/images/blogger/content_1.jpeg",
    "https://resource.tuniaokj.com/images/blogger/onepiece-1.jpg",
    "https://resource.tuniaokj.com/images/blogger/onepiece-2.jpg",
  ]);

  const { triggerElementId, navbarOpacity, init: initTransparentScroll, updateTargetTriggerValue, opacityScrollHandle } = useScrollTransparentNavbar(instance);

  onMounted(() => {
    initTransparentScroll();
  });
  // 导航栏的高度
  const navbarHeight = ref(0);
  interface ProductData {
    banners: Banner[];
    products: Product[];
    isLoad: boolean;
  }
  // 分类数据
  // 当前选中的分类索引
  const currentCategoryIndex = ref(0);
  const categoryList = ref<Category[]>([]);
  // 产品数据
  const categoryProductData = ref<ProductData[]>([]);

  // 顶部导航栏初始化完成事件
  const navbarInitFinishHandle = (info: NavbarRectInfo) => {
    updateTargetTriggerValue(info.height);
    navbarHeight.value = info.height;
  };

  // 跳转到关于图鸟页面
  const navAboutPage = () => {
    tnNavPage("/tuniao/about/index");
  };

  // 跳转到搜索页面
  const navSearchPage = () => {
    tnNavPage("/home-page/search/index");
  };

  const onLoad: IndexPageOnLoadFunc = () => {
    categoryList.value = [
      {
        id: "1",
        name: "推荐",
        icon: "logo-tuniao",
      },
      // {
      //   id: "2",
      //   name: "最新",
      //   icon: "logo-tuniao",
      // },
      // {
      //   id: "3",
      //   name: "最热",
      //   icon: "logo-tuniao",
      // },
    ];
    categoryProductData.value = Array.from({
      length: categoryList.value.length,
    }).map(() => ({
      banners: [],
      products: [],
      isLoad: false,
    }));
    // 设置第一个分类的数据
    categoryProductData.value[0].banners = Array.from({
      length: 5,
    }).map(() => generateBanner());
    categoryProductData.value[0].products = Array.from({
      length: 20,
    }).map(() => generateProductData());
    categoryProductData.value[0].isLoad = true;
  };

  const onScroll: IndexPageOnScrollFunc = ({ top }) => {
    opacityScrollHandle(top);
  };

  // 生成产品数据
  const generateProductData = (): Product => {
    return {
      id: generateRandomNumber(1, 100).toString(),
      title: "图鸟模板",
      desc: "图鸟模板，是一套你值得拥有的模板",
      images: [
        "https://resource.tuniaokj.com/images/shop/bag1.jpg",
        "https://resource.tuniaokj.com/images/shop/bag2.jpg",
        "https://resource.tuniaokj.com/images/shop/card.jpg",
        "https://resource.tuniaokj.com/images/shop/computer1.jpg",
        "https://resource.tuniaokj.com/images/shop/computer2.jpg",
        "https://resource.tuniaokj.com/images/shop/cup1.jpg",
        "https://resource.tuniaokj.com/images/shop/cup2.jpg",
      ].sort(() => Math.random() - 0.5),
      price: generateRandomFloat(1, 1000),
      sale: generateRandomNumber(1, 1000),
      content: "图鸟模板，是一套你值得拥有的模板",
      attributes: [
        {
          name: "前端语言",
          value: "uniapp",
        },
        {
          name: "后端语言",
          value: "你想要的都有",
        },
        {
          name: "授权方式",
          value: "单独购买",
        },
      ],
      tags: ["热销", "推荐", "新品"].slice(0, generateRandomNumber(1, 3)),
    };
  };
  // 生成轮播图
  const generateBanner = (): Banner => {
    return {
      id: generateRandomNumber(1, 100).toString(),
      name: "图鸟模板",
      image: [
        "https://resource.tuniaokj.com/images/shop/banner1.jpg",
        "https://resource.tuniaokj.com/images/shop/banner2.jpg",
        "https://resource.tuniaokj.com/images/swiper/ad2.jpg",
        "https://resource.tuniaokj.com/images/swiper/ad3.jpg",
        "https://resource.tuniaokj.com/images/swiper/ad4.jpg",
        "https://resource.tuniaokj.com/images/swiper/ad5.jpg",
      ][generateRandomNumber(0, 5)],
    };
  };

  // 分类切换事件
  const categoryChangeHandle = (index: string | number) => {
    if (!categoryProductData.value[index as number]?.banners?.length) {
      categoryProductData.value[index as number].banners = Array.from({
        length: 5,
      }).map(() => generateBanner());
      categoryProductData.value[index as number].products = Array.from({
        length: 20,
      }).map(() => generateProductData());
    }
  };

  useSubPageProvide(0, {
    onLoad,
    onScroll,
  });

  return {
    triggerElementId,
    navbarOpacity,
    swiperData,
    hotCategoryData,
    noticeData,
    adCapsuleData,
    hotCaseData,
    tnNavPage,
    navbarInitFinishHandle,
    navAboutPage,
    navSearchPage,
    categoryProductData,
    navbarHeight,
    currentCategoryIndex,
    categoryList,
    categoryChangeHandle,
  };
};
